<template>
  <div class="accountexpend">
    <el-form :inline="true">
      <!-- <el-form-item label="单号">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="起止时间：">
        <el-date-picker
          v-model="value1"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          @change="query()"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="申请单：" style="margin-left: 10px">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 10px">
        <el-button plain @click="onsubmit">查询</el-button>
      </el-form-item>
      <el-form-item label="到账时间：" style="margin-left: 10px">
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-left: 10px">
        <el-button class="el-icon-edit" @click="arrival()">到账</el-button>
        <el-button class="el-icon-edit" @click="arrivalAll()"
          >全部到账</el-button
        >
      </el-form-item>
    </el-form>
    <div class="xbox">
      <el-table
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :row-style="{ height: '48px' }"
        height="100%"
      >
        <el-table-column
          type="selection"
          fixed="left"
          width="55"
        ></el-table-column>
        <el-table-column prop="" label="操作" fixed="left" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.ReviewResult != 4"
              size="small"
              @click="arrival(scope.row)"
              >到账</el-button
            >
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" fixed="left" width="60px">
        </el-table-column>
        <el-table-column prop="ReviewResult" label="业务状态" width="120">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.ReviewResult == 0">未提交</span>
              <span v-else-if="scope.row.ReviewResult == 1">待审核</span>
              <span v-else-if="scope.row.ReviewResult == 2">审核退回</span>
              <span v-else-if="scope.row.ReviewResult == 9">审核通过</span>
              <span v-else-if="scope.row.ReviewResult == 3">制单打印</span>
              <span v-else-if="scope.row.ReviewResult == 4">财务到账</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Socialsecuritytype" label="参保类型" width="100">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.Socialsecuritytype == 0">其他</span>
              <span v-else-if="scope.row.Socialsecuritytype == 1">城居保</span>
              <span v-else-if="scope.row.Socialsecuritytype == 2">职保</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="姓名" width="90" />
        <el-table-column prop="gender" label="性别" width="60">
        </el-table-column>
        <el-table-column prop="IdentityNum" label="身份证号" width="180" />
        <el-table-column prop="Balance" label="账户余额" width="150">
          <template slot-scope="scope">
            {{ number_format(scope.row.Balance, 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="OutMoney" label="支出金额" width="150">
          <template slot-scope="scope">
            {{ number_format(scope.row.OutMoney, 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="OperName" label="经办人" width="90">
        </el-table-column>
        <el-table-column prop="OperTime" label="经办时间" width="190">
          <template slot-scope="scope">
            <div>
              {{ formatDate(scope.row.OperTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ReviewName" label="审核人" width="90">
        </el-table-column>
        <el-table-column prop="ReviewTime" label="审核时间" width="190">
          <template slot-scope="scope">
            <div>
              {{ formatDate(scope.row.ReviewTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="FinanceName" label="到账人" width="90">
        </el-table-column>
        <el-table-column prop="FinanceTime" label="到账时间" width="190">
          <template slot-scope="scope">
            <div>
              {{ formatDate(scope.row.FinanceTime) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.tableData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  API_FIN_GET_FA,
  API_FIN_GET_GF,
  API_FIN_GET_ACLS,
} from "../../api/Voucherpreparation";
import { API_ZHICHU_ACGVD, API_ZHICHU_GOBA } from "../../api/account";
import { API_FINANCE } from "../../api/finance";
export default {
  name: "",
  data() {
    return {
      msg: "账户支出到账",
      value: "", // 到账时间
      value1: [],
      value2: "", // 申请单
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      tableData: [], // 表单数据
      multipleSelection: [], // 选中数据合集
      options: [],
      pagesize: 10, //每页的数据条数
      currentPage: 1, // 页码
    };
  },
  methods: {
    query() {
      let timestart = null;
      let timeend = null;
      this.options = [];
      console.log(this.value1);
      if (
        this.value1[0] == "" ||
        this.value1[0] == null ||
        this.value1[1] == "" ||
        this.value1[1] == null
      ) {
        this.$message.warning("请选择起止时间！");
      } else {
        var reg = /^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
        var regExp = new RegExp(reg);
        // console.log(reg.test(this.value1[0].toString()));
        // console.log(reg.test(this.value1[1].toString()));
        if (regExp.test(this.value1[0]) && regExp.test(this.value1[1])) {
          timestart = this.value1[0];
          timeend = this.value1[1];
        } else {
          timestart =
            this.value1[0].getFullYear() +
            "-" +
            (this.value1[0].getMonth() + 1) +
            "-" +
            this.value1[0].getDate();
          timeend =
            this.value1[1].getFullYear() +
            "-" +
            (this.value1[1].getMonth() + 1) +
            "-" +
            this.value1[1].getDate();
        }
        // console.log(timestart); // 开始时间
        // console.log(timeend); // 结束时间
        let data = {
          ReviewResult: 99,
          SDT: timestart,
          EDT: timeend,
        };
        API_FIN_GET_ACLS(data)
          .then((res) => {
            this.value = "";
            console.log(res);
            this.$message.success("查询成功！");
            res.ResList.map((item, index) => {
              this.options.push({
                value: item.ApplyGroupid,
                label: item.ApplyGroupid,
              });
            });
            console.log(this.options);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dateToString(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    formatDate(time) {
      if (time != "") {
        if (time.toString().substr(6, 13) < 0) {
          return "";
        } else {
          return this.timeD(new Date(parseInt(time.toString().substr(6, 13))));
        }
      }
    },
    // 赋值默认时间
    nowTim() {
      this.value1["0"] =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1) +
        "-" +
        (new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate());
      this.value1["1"] =
        new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1) +
        "-" +
        (new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate());
    },
    timeD(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    // 到账操作
    arrival(row) {
      let data = { datalist: [], FinanceData: "" };
      if (this.value2 == "") {
        this.$message.warning("请选择到账时间！");
      } else {
        if (row == undefined) {
          if (this.multipleSelection.length != 0) {
            data.datalist = this.multipleSelection.map((item) => {
              if (item.ReviewResult != 4) {
                return {
                  Id: item.Id,
                };
              }
            });
            data.FinanceData =
              this.value2.getFullYear() + "-" + (this.value2.getMonth() + 1) < 0
                ? "0" + (this.value2.getMonth() + 1)
                : this.value2.getMonth() + 1 + "-" + this.value2.getDate();
          } else {
            this.$message.warning("请勾选有效数据！");
          }
        } else {
          data.datalist = [
            {
              Id: row.Id,
            },
          ];

          data.FinanceData =
            this.value2.getFullYear() +
            "-" +
            (this.value2.getMonth() + 1) +
            "-" +
            this.value2.getDate();
        }
        if (data != undefined) {
          API_FINANCE(data)
            .then((res) => {
              console.log(res);
              this.$message.success("到账成功!");
              this.onsubmit();
            })
            .catch((err) => {
              console.log(err);
            });
        }
      }
    },
    arrivalAll() {
      let data = { datalist: [], FinanceData: "" };
      if (this.value2 == "") {
        this.$message.warning("请选择到账时间！");
      } else {
        data.datalist = this.tableData.map((item) => {
          if (item.ReviewResult != 4) {
            return {
              Id: item.Id,
            };
          }
        });
        data.FinanceData =
          this.value2.getFullYear() + "-" + (this.value2.getMonth() + 1) < 0
            ? "0" + (this.value2.getMonth() + 1)
            : this.value2.getMonth() + 1 + "-" + this.value2.getDate();
        API_FINANCE(data)
          .then((res) => {
            console.log(res);
            this.$message.success("到账成功!");
            this.onsubmit();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 获取支出到账数据
    onsubmit() {
      // let data = {};
      let timestart = null;
      let timeend = null;
      if (
        this.value1[0] == "" ||
        this.value1[0] == null ||
        this.value1[1] == "" ||
        this.value1[1] == null
      ) {
        this.$message.warning("请选择起止时间！");
      } else {
        var reg = /^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
        var regExp = new RegExp(reg);
        // console.log(reg.test(this.value1[0].toString()));
        // console.log(reg.test(this.value1[1].toString()));
        if (regExp.test(this.value1[0]) && regExp.test(this.value1[1])) {
          timestart = this.value1[0];
          timeend = this.value1[1];
        } else {
          timestart =
            this.value1[0].getFullYear() +
            "-" +
            (this.value1[0].getMonth() + 1) +
            "-" +
            this.value1[0].getDate();
          timeend =
            this.value1[1].getFullYear() +
            "-" +
            (this.value1[1].getMonth() + 1) +
            "-" +
            this.value1[1].getDate();
        }
        console.log(timestart); // 开始时间
        console.log(timeend); // 结束时间
      }
      if (this.value != "") {
        let data = {
          Applyid: this.value,
        };
        console.log(data);
        API_ZHICHU_GOBA(data)
          .then((res) => {
            console.log(res);
            this.tableData = res.ResList;
            // let a = 0;
            // res.ResList.map((item, index) => {
            //   a += Number(item.OutMoney);
            // });
            // this.allMoney = a;
            // console.log(this.allMoney);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message.warning("请选择单号！");
      }
    },
  },
  created() {
    this.nowTim();
    this.query();
    // this.onsubmit();
  },
};
</script>

<style scoped lang="scss">
.accountexpend {
  padding: 30px;
  /* &/deep/.cell {
    text-align: center;
  } */
  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }
  .xbox {
    height: calc(100vh - 220px);
  }
}
</style>
